<template>
    <!-- 基础组件 - canvas文本艺术字 -->
    <canvas ref="canvasText"></canvas>
</template>

<script>
import Observer from "@/utils/eventBus.js";
import { warning } from '@/utils/errorInfo';
export default {
    name: "DesignCanvasText",
    props: {
        element: {
            type: Object
        }
    },
    data() {
        return {
            context: null, // 全局上下文
            font: {
                fontFamily: "sans-serif", // canvas 默认字体
            }
        }
    },
    methods: {
        designTextTool(data) {
            if (data.id !== this.element.id) return; // 只有当前选中的组件才需要处理事件
            if (data.eventType === 'color') { // 颜色事件
                this.watchContent(this.element.options.content);
            } else if (data.eventType === 'bold') { // 加粗
                if (this.element.style.fontWeight == 'normal') this.element.style.fontWeight = 'bold';
                else this.element.style.fontWeight = 'normal';
                this.watchContent(this.element.options.content);
            } else if (data.eventType === 'italic') { // 斜体
                if (this.element.style.fontStyle == 'normal') this.element.style.fontStyle = 'italic';
                else this.element.style.fontStyle = 'normal';
                this.watchContent(this.element.options.content);
            } else if (data.eventType === 'underline') { // 下划线
                warning('暂不支持下划线');
            } else if (data.eventType === 'strikeThrough') { // 删除线
                warning('暂不支持删除线');
            } else if (data.eventType === 'undo') {
                warning('暂不支持撤销');
            } else if (data.eventType === 'redo') {
                warning('暂不支持恢复');
            } else if (data.eventType == 'fontName') { // canvas字体
                this.font.fontFamily = data.data == 'initial' ? 'sans-serif' : data.data;
                this.watchContent(this.element.options.content);
            } else if (data.eventType == 'fontSize') { // 特殊情况！！
                this.element.style.fontSize = data.data;
                this.watchContent(this.element.options.content);
            } else if (data.eventType == 'justifyLeft') {
                this.element.style.textAlign = 'start';
                this.watchContent(this.element.options.content);
            } else if (data.eventType == 'justifyCenter') {
                this.element.style.textAlign = 'center';
                this.watchContent(this.element.options.content);
            } else if (data.eventType == 'justifyRight') {
                this.element.style.textAlign = 'end';
                this.watchContent(this.element.options.content);
            } else if (data.eventType == 'indent') {
                warning('暂不支持缩进');
            } else if (data.eventType == 'outdent') {
                warning('暂不支持缩进');
            } else if (data.eventType == 'lineHeight') { // 特殊情况！！
                warning('暂不支持行高');
            }
        },
        watchContent(val) {
            if (val && val.length) {
                this.designText(val);
                // 掉俩次函数是因为渲染时异常问题
                let time = setTimeout(() => {
                    clearTimeout(time);
                    time = null;
                    this.designText(val);
                }, 300);
            }
        },
        designText(text) {
            // 1.清空画布
            this.context.clearRect(0, 0, this.$refs.canvasText.offsetWidth, this.$refs.canvasText.offsetHeight);
            // 2.字体样式
            this.context.font = `${this.element.style.fontStyle} ${this.element.style.fontWeight} ${this.element.style.fontSize} ${this.font.fontFamily}`;
            // 3.字体颜色
            this.context.fillStyle = this.element.style.color;
            // 4.字体居中（根据 x,y选择的位置进行居中处理）
            this.context.textAlign = this.element.style.textAlign;
            // 5.基线对齐
            this.context.textBaseline = this.element.style.textBaseline;
            // 6.缩放处理
            // this.context.scale(this.element.options.scale.x, this.element.options.scale.y);
            // 7.填充文字
            let measureText = this.context.measureText(text);
            if (measureText.width > this.element.options.canvasWidth) {
                this.context.fillText(text, 0, Number(this.element.style.fontSize.slice(0, -2)), this.element.options.canvasWidth);
            } else this.context.fillText(text, 0, Number(this.element.style.fontSize.slice(0, -2)));
        },
        watchCanvasHeight(val) { // 监听画布的高度
            // this.$refs.canvasText.height = val;
            this.watchCanvasWidth();
            // this.watchContent(this.element.options.content);
        },
        watchCanvasWidth() { // 监听画布的宽度
            this.element.options.canvasWidth = this.$refs.canvasText.offsetParent && this.$refs.canvasText.offsetParent.offsetWidth;
            this.$refs.canvasText.width = this.element.options.canvasWidth;
            this.$refs.canvasText.height = this.element.options.canvasHeight;
            this.watchContent(this.element.options.content);
        },
        watchChange() {
            this.watchContent(this.element.options.content);
        }
    },
    watch: {
        'element.options.content': 'watchContent',
        'element.options.canvasHeight': 'watchCanvasHeight',
        'element.options.canvasWidth': 'watchCanvasWidth',
        'element.style.textBaseline': 'watchChange'
    },
    mounted() {
        this.$nextTick(() => {
            // 绑定工具栏的功能
            Observer.$on('designTool', this.designTextTool);
            // 绑定画布功能
            this.element.options.canvasWidth = this.$refs.canvasText.offsetParent && this.$refs.canvasText.offsetParent.offsetWidth;
            this.$refs.canvasText.width = this.element.options.canvasWidth;
            this.$refs.canvasText.height = this.element.options.canvasHeight;
            this.context = this.$refs.canvasText.getContext("2d");
            // 回显数据
            if (this.element.options.content) {
                this.font.fontFamily = this.element.style.fontFamily == 'initial' ? 'sans-serif' : this.element.style.fontFamily;
                this.watchContent(this.element.options.content);
            }
        });
    }
}
</script>
